﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Areas/Website/Views/Shared/Master.Master"
    Inherits="System.Web.Mvc.ViewPage<ProductViewModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <div class="divPager2">
        <%= Html.Pager(ViewData["Pager"]) %>
    </div>
    <ul class="productlist_box">
        <%
            foreach (var item in Model.ProductList)
            {
        %>
        <li>
            <div class="i">
                <a href="<%=Url.Action("Preview", new { productId = item.ProductId }) %>">
                    <img src="<%=string.Format("{0}/{1}/{2}",Model.ImageRoot,item.ProductId ,item.ImageName) %>"
                        alt="" />
                </a>
            </div>
            <div class="d">
                <%=Html.ActionLink(item.ProductName, "Preview", new { productId = item.ProductId })%>
            </div>
        </li>
        <%
            }
        
        %>
    </ul>
    <div class="divPager2">
        <%= Html.Pager(ViewData["Pager"]) %>
    </div>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
    <%= HtmlMetaHelper.HtmlTitle(Model.Classify.Title,Model.Classify.KeyWords,Model.Classify.Description) %>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cssLink" runat="server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="jsLink" runat="server">
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="cssContent" runat="server">
    <style type="text/css">
        .productlist_box
        {
            margin: 15px 0;
            overflow: hidden;
            _zoom:1;
            padding: 1px;
        }
        .productlist_box li
        {
            float: left;
            text-align:center;
            padding: 5px;
            width: 30.8%;
            border: 1px dotted #ccc;
            margin: 5px 0;
            overflow: hidden;
        }
        .productlist_box li.alt
        {
            margin: 5px 10px;
        }
        .productlist_box .i img
        {
            width: 90%;
        }
        .productlist_box .d
        {
            height: 32px;
            padding:5px;
            text-align: center;
            overflow: hidden;
        }
    </style>
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="jsContent" runat="server">
    <script type="text/javascript">
        $(function () {
            $(".productlist_box li").each(function (i, n) {
                if ((i + 2) % 3 == 0) {
                    $(".productlist_box li").eq(i).addClass("alt");
                }
            });
        });
    </script>
</asp:Content>
